<template>
  <!--TODO: 不用了 -->
  <el-select
    ref="commonSelect"
    :value="selectValue"
    :placeholder="placeholder"
    filterable
    :filter-method="handleCommonFilter"
    :loading="!item.opintion.length"
    :disabled="disabled"
    :clearable="clearable"
    style="width: 100%"
    @clear="clearValue"
    @focus="getDataSource"
  >
    <el-option
      :value="selectValue"
      class="options"
      style="height:220px;background-color:#fff;overflow-y:auto;"
    >
      <el-tree
        id="tree-option"
        ref="commonTree"
        :style="{
          width: '100%'
        }"
        accordion
        :filter-node-method="filterNode"
        :data="item.opintion"
        @node-click="handleCommonClick"
      >
        <!-- <span slot-scope="{ node, data }" class="span-ellipsis"> -->
        <span slot-scope="{ data }" class="span-ellipsis">
          <span :title="data[showLabelKey]">{{ data[showLabelKey] }}</span>
        </span>
      </el-tree>
    </el-option>
  </el-select>
</template>

<script type="text/ecmascript-6">
import { getCommonData } from '@/api/reportCenter';
import { filterRequestData, setFatherNode } from '../common';
import { getUnit } from '@/api/login/index';

export default {
  props: {
    item: {
      type: Object,
      default: () => ({})
    },
    placeholder: {
      type: String,
      default: () => {
        return '请选择';
      }
    },
    disabled: {
      type: Boolean,
      default: () => {
        return false;
      }
    },
    selectValue: {
      type: [String, Number],
      default: () => {
        return '';
      }
    },
    clearable: {
      type: Boolean,
      default: true
    }
  },

  data() {
    return {
      loading: false
      // saveCommonOptions: []
    };
  },

  // inject: ['formData'],
  inject: {
    formData: {
      from: 'formData',
      default: ''
    }
  },

  computed: {
    showLabelKey() {
      return this.item.selectViewOptions && this.item.selectViewOptions.renderValue;
    },

    getFormData() {
      if (this.formData) {
        return this.formData();
      } else {
        return undefined;
      }
    }

  },
  methods: {
    getDataSource() {
      const { item } = this;
      if (!this.item.opintion.length) {
        this.loading = true;
        // 部门编码直接写死的
        if (['enterpriseListTree', 'enterpriseInTree'].includes(item.componentType)) {
          item.selectViewOptions = this.renderKey = {
            renderKey: 'name',
            renderMapKey: 'id',
            renderValue: 'name'
          };
          const obj = {
            resultAsTree: true,
            userId: localStorage.getItem('xcUserId')
          };
          item.componentType === 'enterpriseInTree' && (obj.isHideParent = true);
          getUnit(obj).then(res => {
            this.loading = false;
            const { success, data } = res;
            if (success && data) {
              data.map(v => {
                v.id = v.id + '';
              });
              setFatherNode(res.data);
              this.item.opintion = res.data;
              // if (data.length === 1) {
              //   this.$emit('change', data[0]);
              // }
            } else {
              this.item.opintion = [];
            }
          });
          return;
        }
        if (!item.focusUrlParams || !item.focusUrl || JSON.stringify(item.focusUrlParams) === '{}') return this.$message.error('请求参数未配置');
        const {
          focusUrlParams
        } = item;
        let endREquestPayload = focusUrlParams;
        if (this.getFormData) {
          const other = focusUrlParams.other;
          if (other) {
            endREquestPayload = filterRequestData(focusUrlParams, this.getFormData, this.item);

            if (!endREquestPayload) {
              return;
            }
          }
        }

        endREquestPayload && getCommonData(endREquestPayload, item.focusUrl).then(({ data: res }) => {
          this.loading = false;
          if (res.success) {
            setFatherNode(res.data);
            this.item.opintion = res.data;
          } else {
            this.item.opintion = [];
          }
          this.$forceUpdate();
        });
      } else {
        this.$forceUpdate();
      }
    },
    handleCommonFilter(val) {
      this.$refs.commonTree.filter(val);
    },
    handleCommonClick(data, node) {
      if (['treeSelectBot', 'enterpriseListTree', 'enterpriseInTree'].includes(this.item.componentType)) {
        if (!data.children) {
          this.$emit('changeData', {
            data,
            node,
            item: this.item
          });
          // select事件触发后，自动触发showCityName事件
          this.$refs.commonSelect.blur();
        }
      } else if (this.item.componentType === 'treeSelect') {
        this.$emit('changeData', {
          data,
          node,
          item: this.item
        });
        this.$refs.commonSelect.blur();
      }
    },
    filterNode(value, data) {
      if (!value) return true;
      return data[this.showLabelKey].indexOf(value) !== -1;
    },
    clearValue() {
      const data = {};
      for (const i in this.item.opintion[0]) {
        data[i] = '';
      }
      const node = {};
      node.data = data;
      // 暂时设置5层
      for (let i = 0; i < 5; i++) {
        node.parent = { ...node };
      }
      this.$emit('clear', {
        item: this.item
      });
      this.$emit('changeData', {
        data,
        node,
        item: this.item
      });
    }
  }
};
</script>
<style lang="scss" scoped>
.el-select-dropdown__item {
  padding: 0 5px !important;
  // position: absolute;
}
</style>
